<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="referrer" content="no-referrer" />
        <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" th:href="@{/css/global.css}"/>
        <title>牛客网-数据统计</title>
    </head>
    <body>
        <div class="nk-container">
            <!-- 头部 -->
            <div th:replace="~{index::headerMark}"></div>

            <!-- 内容 -->
            <div class="main">
                <!-- 网站UV -->
                <div class="container pl-5 pr-5 pt-3 pb-3 mt-3">
                    <h6 class="mt-3"><b class="square"></b> 网站 UV</h6>
                    <form class="form-inline mt-3" method="post" th:action="@{/data/uv}">
                        <input type="date" class="form-control" required name="start"
                               th:value="${#dates.format(uvStart,'yyyy-MM-dd')}"/>
                        <input type="date" class="form-control ml-3" required name="end"
                               th:value="${#dates.format(uvEnd,'yyyy-MM-dd')}"/>
                        <button type="submit" class="btn btn-primary ml-3">开始统计</button>
                    </form>
                    <ul class="list-group mt-3 mb-3">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            统计结果
                            <span class="badge badge-primary badge-danger font-size-14" th:text="${uvResult}">0</span>
                        </li>
                    </ul>
                </div>
                <!-- 活跃用户 -->
                <div class="container pl-5 pr-5 pt-3 pb-3 mt-4">
                    <h6 class="mt-3"><b class="square"></b> 活跃用户</h6>
                    <form class="form-inline mt-3" method="post" th:action="@{/data/dau}">
                        <input type="date" class="form-control" required name="start"
                               th:value="${#dates.format(dauStart,'yyyy-MM-dd')}"/>
                        <input type="date" class="form-control ml-3" required name="end"
                               th:value="${#dates.format(dauEnd,'yyyy-MM-dd')}"/>
                        <button type="submit" class="btn btn-primary ml-3">开始统计</button>
                    </form>
                    <ul class="list-group mt-3 mb-3">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            统计结果
                            <span class="badge badge-primary badge-danger font-size-14" th:text="${dauResult}">0</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 尾部 -->
            <div th:replace="~{index::footerMark}"></div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                crossorigin="anonymous"></script>
        <script th:src="@{/js/global.js}"></script>
    </body>
</html>
